<template>
  <!-- 详情 -->
  <div>
    <div id="top">
      <span class="iconfont arrow_l">&#xe603;</span>
      <h2>商品详情</h2>
      <p>
        <span class="iconfont">&#xe64a;</span>
        <span class="iconfont">&#xe614;</span>
        <i class="line"></i>
      </p>
    </div>
    <div id="nav">
      <nav>
        <a href="#" class="cur">商品<i class="line"></i></a>
        <a href="#">评价</a>
        <a href="#">详情</a>
        <a href="#">推荐</a>
      </nav>
    </div>
    <div id="banner">
      <img :src="$pre + info.img" alt="" />
      <span>8/8</span>
      <i><img src="../../assets/img/shopDet1.png" alt="" /></i>
    </div>
    <div id="message">
      <p class="p1">
        <em>￥</em><span>{{ info.price }}</span
        ><del>￥{{ info.market_price }}</del
        ><i>收藏</i>
        <b></b>
      </p>
      <p class="p2">{{ info.goodsname }}</p>
      <p class="p3">敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
      <p class="p4">11.11限时299元起</p>
      <p class="p5">
        此商品于2020-11-11，00点结束闪购特卖，品牌美妆闪购专场
        <a href="#">查看<i class="iconfont">&#xe607;</i></a>
      </p>
    </div>
    <div id="service">
      <div class="p1">
        <span>领券</span>
        <img src="../../assets/img/shopDet7.png" alt="" />
        <i></i>
      </div>
      <p class="p2">
        <span>分期</span><em>可选3/6/12期</em><i class="iconfont">&#xe607;</i>
      </p>
    </div>
    <div id="last">
      <div class="left">
        <div class="box_1">
          <img src="../../assets/img/shopDet3.png" alt="" />
          <span>客服</span>
        </div>
        <div class="box_2">
          <img src="../../assets/img/shopDet6.png" alt="" />
          <span>店铺</span>
        </div>
        <div class="box_3">
          <img src="../../assets/img/shopDet5.png" alt="" />
          <span>购物车</span>
        </div>
      </div>
      <div class="right">
        <span @click="goshops()">加入购物车</span>
        <span>立即购买</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { getGoodsinfo, cartAdd } from "../../utils/api";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  props: [],
  components: {},
  data() {
    return {
      info: {},
      users: {},
    };
  },
  computed: {
    ...mapGetters({}),
  },
  methods: {
    ...mapActions({}),
    goshops() {
      if (this.users.token) {
        cartAdd({ uid: this.users.uid, goodsid: this.info.id, num: 1 }).then(
          (res) => {
            console.log(res);
          }
        );
        this.$router.push("/shop");
      } else {
        Toast("用户未登录，将跳转到登录页");
        this.$router.push("/login");
      }
    },
  },
  mounted() {
    getGoodsinfo({ id: this.$route.query.id }).then((res) => {
      this.info = res.data.list[0] ? res.data.list[0] : [];
    });
    this.users = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : {};
  },
};
</script>

<style scoped>
body,
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  max-width: 7.5rem;
  margin: 0 auto;
}
#top {
  height: 0.64rem;
  background: #ff6040;
  display: flex;
  padding: 0.28rem 0.12rem 0.28rem 0.32rem;
  color: #ffdfd8;
  align-items: center;
}
#top h2 {
  width: 1.4rem;
  margin: 0 1.23rem 0 2.53rem;
  font-size: 0.32rem;
}
#top .arrow_l {
  font-size: 0.34rem;
}
#top p {
  width: 1.74rem;
  height: 0.64rem;
  border: 1px solid #ff8a6f;
  box-sizing: border-box;
  border-radius: 0.54rem;
  display: flex;
  align-items: center;
  position: relative;
}
#top p span {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 0.64rem;
}
#top p .line {
  width: 1px;
  height: 0.37rem;
  background: #ff896e;
  position: absolute;
  top: 0.12rem;
  left: 0.86rem;
}
#nav {
  height: 0.5rem;
  line-height: 0.5rem;
  background: linear-gradient(#ff7864, #ff8a7f);
  display: flex;
  padding: 0 0.68rem 0 0.68rem;
  box-sizing: border-box;
  justify-content: space-between;
}
#nav a {
  margin-right: 1.34rem;
  color: #fff3f2;
}
#nav a:nth-child(4) {
  margin-right: 0;
}
#nav a.cur {
  font-weight: bold;
  position: relative;
  font-size: 0.3rem;
  margin-top: -0.05rem;
}
#nav a.cur i {
  position: absolute;
  background: #fff;
  width: 0.4rem;
  height: 0.04rem;
  left: 0.09rem;
  bottom: -0.06rem;
}
#banner {
  position: relative;
  height: 7.48rem;
}
#banner img {
  width: 100%;
}
#banner span {
  width: 0.84rem;
  height: 0.32rem;
  border-radius: 0.4rem;
  background: #595456;
  color: #fff;
  position: absolute;
  right: 0.2rem;
  top: 7rem;
  text-align: center;
  line-height: 0.32rem;
}
#banner i {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
}
#banner i img {
  width: 0.48rem;
  height: 0.48rem;
}
#message {
  height: 2.91rem;
  background-color: #fff;
  margin-bottom: 0.2rem;
  padding-bottom: 0.18rem;
}
#message .p1 {
  width: 6.6rem;
  height: 0.5rem;
  margin-left: 0.25rem;
  margin-top: 0.2rem;
  margin-bottom: 0.22rem;
  position: relative;
}
#message .p1 em {
  font-size: 0.18rem;
  color: #ff6040;
  font-weight: bold;
  margin-right: 0.08rem;
}
#message .p1 span {
  font-weight: bold;
  font-size: 0.46rem;
  color: #ff6040;
  margin-right: 0.12rem;
}
#message .p1 del {
  font-weight: bold;
  font-size: 0.22rem;
  color: #979797;
}
#message .p1 i {
  height: 0.2rem;
  margin-left: 4rem;
  font-size: 0.2rem;
  text-align: center;
  color: #ff6444;
  display: inline-block;
}
#message .p1 b {
  display: inline-block;
  width: 0.22rem;
  height: 0.22rem;
  position: absolute;
  right: 0.25rem;
  background: url(../../assets/img/shopDet2.png) no-repeat left top;
  background-position-y: 0.05rem;
  background-size: 0.22rem;
}
#message .p2 {
  margin-left: 0.25rem;
  margin-bottom: 0.12rem;
  font-size: 0.3rem;
  color: #333;
}
#message .p3 {
  margin-left: 0.25rem;
  margin-bottom: 0.26rem;
  font-size: 0.26rem;
  color: #999;
}
#message .p4 {
  width: 1.9rem;
  height: 0.3rem;
  font-size: 0.16rem;
  text-align: center;
  line-height: 0.3rem;
  color: #fff7f6;
  margin-left: 0.25rem;
  background: #ff8066;
  margin-bottom: 0.2rem;
}
#message .p5 {
  width: 7.1rem;
  height: 0.38rem;
  line-height: 0.38rem;
  margin-left: 0.25rem;
  background: #f2f2f2;
  color: #a9a9a9;
  font-size: 0.18rem;
  padding-left: 0.1rem;
  box-sizing: border-box;
}
#message .p5 a {
  margin-right: 0.04rem;
  color: #fe6141;
}
#message .p5 a .iconfont {
  font-size: 0.14rem;
  vertical-align: middle;
}
#service {
  background: #fff;
  height: 1.6rem;
}
#service .p1 {
  height: 0.92rem;
  padding: 0.4rem 0.2rem 0.12rem 0.2rem;
  box-sizing: border-box;
}
#service .p1 span {
  font-size: 0.22rem;
  color: #333;
  font-weight: bold;
  float: left;
  margin-right: 0.4rem;
}
#service .p1 img {
  width: 2.48rem;
  height: 0.32rem;
  float: left;
  vertical-align: middle;
}
#service .p1 i {
  display: inline-block;
  margin-left: 0.88rem;
  width: 6.41rem;
  height: 0.02rem;
  background-color: #e6e6e6;
  margin-top: 0.16rem;
}
#service .p2 {
  height: 0.66rem;
  padding: 0.32rem 0.2rem 0.12rem 0.2rem;
  box-sizing: border-box;
}
#service .p2 span {
  float: left;
  font-size: 0.22rem;
  color: #333;
  font-weight: bold;
  margin-right: 0.4rem;
}
#service .p2 em {
  float: left;
  font-size: 0.22rem;
  color: #717171;
}
#service .p2 .iconfont {
  float: right;
  font-size: 0.18rem;
  vertical-align: middle;
  color: #6f6f6f;
}
#last {
  height: 1rem;
  border-top: 0.01rem solid #ccc;
  box-sizing: border-box;
  background-color: #fff;
}
#last .left {
  width: 3.1rem;
  height: 1rem;
  padding: 0.15rem 0.4rem 0.14rem 0.4rem;
  box-sizing: border-box;
  float: left;
}
#last .left .box_1 {
  height: 0.7rem;
  float: left;
  margin-right: 0.3rem;
}
#last .left .box_1 img {
  vertical-align: middle;
  width: 0.35rem;
  height: 0.4rem;
}
#last .left .box_1 span {
  height: 0.2rem;
  line-height: 0.2rem;
  text-align: center;
  color: #3a3a3a;
}
#last .left .box_2 {
  height: 0.66rem;
  float: left;
  margin-right: 0.3rem;
  margin-top: 0.04rem;
}
#last .left .box_2 img {
  vertical-align: middle;
  width: 0.32rem;
  height: 0.32rem;
}
#last .left .box_2 span {
  line-height: 0.18rem;
  text-align: center;
  color: #3a3a3a;
}
#last .left .box_3 {
  height: 0.7rem;
  float: left;
  margin-right: 0;
}
#last .left .box_3 img {
  vertical-align: middle;
  width: 0.4rem;
  height: 0.39rem;
}
#last .left .box_3 span {
  line-height: 0.18rem;
  text-align: center;
  color: #3a3a3a;
}
#last .right {
  width: 4.4rem;
  height: 1rem;
  float: left;
}
#last .right span:nth-child(1) {
  display: inline-block;
  width: 2.2rem;
  height: 1rem;
  background-color: #ffcc66;
  color: #663014;
  font-weight: bold;
  text-align: center;
  font-size: 0.3rem;
  line-height: 1rem;
}
#last .right span:nth-child(2) {
  display: inline-block;
  width: 2.2rem;
  height: 1rem;
  line-height: 1rem;
  background-color: #ff6040;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 0.3rem;
}
</style>